<template>
  <div class="h-full bg-white border-r border-slate-100">
    <div class="heading flex items-center gap-2 p-2">
      <img
        src="https://condorheroblog.github.io/react-antd-admin/assets/logo-CSyrRVWw.svg"
        width="32"
        height="32"
      />
      <TypographyText :level="4" class="text-lg">Ant Design </TypographyText>
    </div>
  
    <Menu
      class="menu"
      :inline-collapsed="state.collapsed"
      mode="inline"
      :items="items"
      @click="handleClickAction"
    />

    <div class="collapsed flex items-center justify-center" @click="toggleCollapsed">
      <a-button type="text"  >
        <MenuUnfoldOutlined v-if="state.collapsed" />
        <MenuFoldOutlined v-else />
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 组件命名
defineOptions({
  name: 'NavMenu',
});
// 导入Vue组合式API
import { ref, onMounted, onBeforeUnmount, useAttrs, useSlots, reactive } from 'vue';
import { Menu, TypographyTitle, TypographyText } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons-vue';


const router = useRouter();

const items = ref([
  {
    key: 'home',
    title: '首页',
    label: '首页',
  },
  {
    key: 'order',
    title: '订单管理',
    label: '订单管理',
  },
  {
    key: 'patient',
    title: '患者管理',
    label: '患者管理',
  },
  {
    key: 'service',
    title: '服务管理',
    label: '服务管理',
  },
  {
    key: 'user',
    title: '用户管理',
    label: '用户管理',
  },
  {
    key: 'manage',
    title: '管理员管理',
    label: '管理员管理',
  },
  {
    key: 'hospital',
    title: '医院管理',
    label: '医院管理',
  },
  {
    key: 'interface',
    title: '接口管理',
    label: '接口管理',
    children: [
      {
        key: 'clinic',
        title: '诊室管理',
        label: '诊室管理',
      },
      {
        key: 'department',
        title: '科室管理',
        label: '科室管理',
      },
      {
        key: 'disease',
        title: '疾病管理',
        label: '疾病管理',
      },
      {
        key: 'identity',
        title: '身份管理',
        label: '身份管理',
      },
      {
        key: 'hospitalLevel',
        title: '医院等级管理',
        label: '医院等级管理',
      },
      {
        key: 'orderStatus',
        title: '订单状态管理',
        label: '订单状态管理',
      },
      {
        key: 'role',
        title: '角色管理',
        label: '角色管理',
      },
      {
        key: 'serverStatus',
        title: '服务状态管理',
        label: '服务状态管理',
      },
    ],
  },
]);


const state = reactive({
  collapsed: false,
  // selectedKeys: ['1'],
  // openKeys: ['sub1'],
  // preOpenKeys: ['sub1'],
});


const handleClickAction = event => {
  const { key } = event;
  router.push({
    name: key,
  });
};

const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;

};


// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});

onBeforeUnmount(() => {
  console.log('组件即将卸载');
});
</script>

<style scoped lang="scss">

</style>

